<template>
  <div class="container article-container">
    <el-row :gutter="20">
      <labels ref="labels" />
      <el-col :xs="24" :lg="19">
        <div class="right-content">
          <h2>{{article.title}}</h2>
          <el-divider />
          <div class="clearfix">
            <div class="left">
              <label-tag ref="label" :label="article.labels" />
            </div>
            <div class="right">更新时间：{{article.updateTime|dateFormat}}</div>
            <div class="right">浏览({{article.counts}})</div>
          </div>
          <p v-html="article.content" v-highlight></p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Labels from '@/views/Index/Core/Label'
import LabelTag from '@/components/Labels'
import { formatDate } from '@/utils/datetime'

export default {
  components: {
    Labels,
    LabelTag
  },
  data () {
    return {
      article: {}
    }
  },
  methods: {
    loadData () {
      if (this.articleId !== undefined) {
        this.$api.index.getArticle({ id: this.articleId }).then((res) => {
          if (res.code === 0) {
            this.article = res.data
            this.$refs.label.setLabel(res.data.labels)
          } else {
            this.$msgbox({ type: 'error', title: '出错了!', message: res.message })
          }
        })

        // 记录查看次数
        this.$api.index.seeArticle({ id: this.articleId }).then((res) => {
        })
      }
    }
  },
  mounted () {
    this.loadData()
  },
  filters: {
    dateFormat: value => {
      return formatDate(value, 'yyyy年MM月dd日')
    }
  },
  computed: {
    articleId () {
      return this.$route.params.id
    }
  }
}
</script>

<style lang="scss">
.right-content {
  .left {
    .el-tag {
      margin-right: 10px;
    }
  }
  .right {
    margin-left: 20px;
  }
}
</style>
